<div class="row">
    <div class="twelve columns">
        <div class="row">
            <div class="twelve columns">
                <h3 class="no-margin inline-block" id="header">Configurations</h3>
                <h6 id="loading-status" class="float-right loading-text"></h6>
            </div>
        </div>
        <hr class="tiny-margin"/>
        <div class="row">
            <p>
                In this page you can enable and disable services, change the camera hostname, disable the cloud features and more.
            </p>
        </div>
        <h4 class="no-margin">General</h4>
        <hr class="tiny-margin"/>
        <div class="row">
            <div class="twelve columns configs-switch">
                <table class="u-full-width padded-table config-table">
                    <tbody>
                    <tr class="row">
                        <td>Hostname</td>
                        <td>
                            <input class="u-full-width" type="text" placeholder="" data-key="HOSTNAME" id="HOSTNAME"/>
                            <span class="switch-description">
                                Camera's hostname on the network. Leave blank to generate automatically.
                            </span>
                        </td>
                    </tr>
                    <tr class="row">
                        <td>Timezone</td>
                        <td>
                            <input class="u-full-width" type="text" placeholder="" data-key="TIMEZONE" id="TIMEZONE"/>
                            <span class="switch-description">
                                Timezone. Get your timezone string from <a href="?page=tz">this page</a> and copy here.
                            </span>
                        </td>
                    </tr>
                    <tr class="row">
                        <td>Disable Cloud</td>
                        <td>
                            <label class="switch small">
                                <input type="checkbox" data-key="DISABLE_CLOUD"/>
                                <span class="slider round"></span>
                                <span class="switch-text"></span>
                            </label>
                            <span class="switch-description">
                                Disable the Yi App and all the Cloud features (aka private mode).
                            </span>
                        </td>
                    </tr>
                    <tr class="row">
                        <td>Recording without Cloud</td>
                        <td>
                            <label class="switch small">
                                <input type="checkbox" data-key="REC_WITHOUT_CLOUD"/>
                                <span class="slider round"></span>
                                <span class="switch-text"></span>
                            </label>
                            <span class="switch-description">
                                Enable recording on the SD card even with the Cloud features disabled. (It takes effect only if the "Disable Cloud" option is enabled).
                            </span>
                        </td>
                    </tr>
                    <tr class="row">
                        <td>RTSP</td>
                        <td>
                            <label class="switch small">
                                <input type="checkbox" data-key="RTSP"/>
                                <span class="slider round"></span>
                                <span class="switch-text"></span>
                            </label>
                            <span class="switch-description">
                                Enable RTSP Server.
                            </span>
                        </td>
                    </tr>
                    <tr class="row">
                        <td>RTSP server program</td>
                        <td>
                            <div class="standard-select">
                                <select data-key="RTSP_ALT" id="RTSP_ALT">
                                    <option value="standard">Standard (based on live555 library)</option>
                                    <option value="alternative">Alternative</option>
                                    <!--<option value="go2rtc">go2rtc</option> out of memory-->
                                </select>
                            </div>
                            <span class="switch-description">
                                Select the RTSP server program.
                                <br/>
                                Note: go2rtc supports only aac audio.
                            </span>
                        </td>
                    </tr>
                    <tr class="row">
                        <td>RTSP Stream</td>
                        <td>
                            <div class="standard-select">
                                <select data-key="RTSP_STREAM" id="RTSP_STREAM">
                                    <option value="high">High</option>
                                    <option value="low">Low</option>
                                    <option value="both">Both</option>
                                </select>
                            </div>
                            <span class="switch-description">
                                Select stream resolution.
                            </span>
                        </td>
                    </tr>
                    <tr class="row">
                        <td>RTSP Audio</td>
                        <td>
                            <div class="standard-select">
                                <select data-key="RTSP_AUDIO" id="RTSP_AUDIO">
                                    <option value="no">Disabled (default)</option>
                                    <option value="pcm">pcm</option>
                                    <option value="alaw">alaw</option>
                                    <option value="ulaw">ulaw</option>
                                    <option value="aac">aac</option>
                                </select>
                            </div>
                            <span class="switch-description">
                                Enable/disable audio for RTSP stream.
                            </span>
                        </td>
                    </tr>
                    <tr class="row">
                        <td>Audio Noise Reduction Level</td>
                        <td>
                            <div class="standard-select">
                                <select data-key="RTSP_AUDIO_NR_LEVEL" id="RTSP_AUDIO_NR_LEVEL">
                                    <option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option>
                                    <option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option>
                                    <option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option>
                                    <option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option>
                                    <option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option>
                                    <option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option>
                                    <option value="30">30</option>
                                </select>
                            </div>
                            <span class="switch-description">
                                Select noise reduction level for audio stream (only with pcm, alaw or ulaw). Select "0" to disable noise reduction and save CPU time.
                            </span>
                        </td>
                    </tr>
                    <tr class="row">
                        <td>ONVIF</td>
                        <td>
                            <label class="switch small">
                                <input type="checkbox" data-key="ONVIF"/>
                                <span class="slider round"></span>
                                <span class="switch-text"></span>
                            </label>
                            <span class="switch-description">
                                Enable ONVIF Server.
                                <br/>
                                <a href="?page=configurations_onvif">ONVIF configuration</a>
                            </span>
                        </td>
                    </tr>
                    <tr class="row">
                        <td>Enable time OSD</td>
                        <td>
                            <label class="switch small">
                                <input type="checkbox" data-key="TIME_OSD"/>
                                <span class="slider round"></span>
                                <span class="switch-text"></span>
                            </label>
                            <span class="switch-description">
                                Enable/disable time OSD in the upper left corner.
                            </span>
                                <br/>
                            <span class="italic">
                                It works only if the cam doesn't show osd natively.
                                <br/>
                                Warning: this option is not fully compatible with the app. If you use the app you will notice a shift in the timeline.
                            </span>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <h4 class="no-margin">Snapshot</h4>
        <hr class="tiny-margin"/>
        <div class="row">
            <div class="twelve columns configs-switch">
                <table class="u-full-width padded-table config-table">
                    <tbody>
                    <tr class="row">
                        <td>Snapshot</td>
                        <td>
                            <label class="switch small">
                                <input type="checkbox" data-key="SNAPSHOT"/>
                                <span class="slider round"></span>
                                <span class="switch-text"></span>
                            </label>
                            <span class="switch-description">
                                Enable snapshot feature.
                                <br/>
                                If you want to use this feature, enable swap file to avoid memory problems.
                            </span>
                        </td>
                    </tr>
                    <tr class="row">
                        <td>Snapshot for recorded video</td>
                        <td>
                            <label class="switch small">
                                <input type="checkbox" data-key="SNAPSHOT_VIDEO"/>
                                <span class="slider round"></span>
                                <span class="switch-text"></span>
                            </label>
                            <span class="switch-description">
                                Create snapshot for recorded video (CPU expensive).
                            </span>
                        </td>
                    </tr>
                    <tr class="row">
                        <td>Force low resolution snapshot</td>
                        <td>
                            <label class="switch small">
                                <input type="checkbox" data-key="SNAPSHOT_LOW"/>
                                <span class="slider round"></span>
                                <span class="switch-text"></span>
                            </label>
                            <span class="switch-description">
                                Take low resolution snapshots only (useful for avoiding memory problems).
                            </span>
                        </td>
                    </tr>
                    <tr class="row">
                        <td>Time-lapse</td>
                        <td>
                            <label class="switch small">
                                <input type="checkbox" data-key="TIMELAPSE"/>
                                <span class="slider round"></span>
                                <span class="switch-text"></span>
                            </label>
                            <span class="switch-description">
                                Enable time-lapse snapshots.
                            </span>
                        </td>
                    </tr>
                    <tr class="row">
                        <td>Time-lapse interval</td>
                        <td>
                            <input class="u-full-width" type="text" placeholder="" data-key="TIMELAPSE_DT" id="TIMELAPSE_DT"/>
                            <span class="switch-description">
                                Interval between frames (minutes: 1-6, 10, 15, 20, 30, 60, 120, 180, 240, 360, 1440).
                                <br/>
                                If you use 1440, please specify offset from midnight with the syntax 1440+offset (example to take snapshot at noon: 1440+720).
                            </span>
                        </td>
                    </tr>
                    <tr class="row">
                        <td>Time-lapse video creation interval</td>
                        <td>
                            <input class="u-full-width" type="text" placeholder="" data-key="TIMELAPSE_VDT" id="TIMELAPSE_VDT"/>
                            <span class="switch-description">
                                Interval between video creation: too difficult to make a gui, use crontab syntax.
                                <br/>
                                For example: "0 0 * * *" to make a video every day at midnight.
                                <br/>
                                Disabled if you leave the field empty or if you enable "Time-lapse ftp push".
                            </span>
                        </td>
                    </tr>
                    <tr class="row">
                        <td>Time-lapse video</td>
                        <td>
                            <span class="switch-description">
                                Go to <a href="?page=timelapse">this page</a> to see time-lapse video
                            </span>
                        </td>
                    </tr>
                    <tr class="row">
                        <td>Time-lapse ftp push</td>
                        <td>
                            <label class="switch small">
                                <input type="checkbox" data-key="TIMELAPSE_FTP"/>
                                <span class="slider round"></span>
                                <span class="switch-text"></span>
                            </label>
                            <span class="switch-description">
                                Send time-lapse snapshots to the ftp server (see Events page for ftp options) and remove local file.
                            </span>
                        </td>
                    </tr>
                    <tr class="row">
                        <td>Overwrite ftp destination file (use same name)</td>
                        <td>
                            <label class="switch small">
                                <input type="checkbox" data-key="TIMELAPSE_FTP_SAME_NAME"/>
                                <span class="slider round"></span>
                                <span class="switch-text"></span>
                            </label>
                            <span class="switch-description">
                                Send time-lapse snapshots to the ftp server using the same name.
                            </span>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <h4 class="no-margin">Advanced</h4>
        <hr class="tiny-margin"/>
        <div class="row">
            <div class="twelve columns configs-switch">
                <table class="u-full-width padded-table config-table">
                    <tbody>
                    <tr class="row">
                        <td>SSH</td>
                        <td>
                            <label class="switch small">
                                <input type="checkbox" data-key="SSHD"/>
                                <span class="slider round"></span>
                                <span class="switch-text"></span>
                            </label>
                            <span class="switch-description">
                                Enable or disable the SSH server.
                            </span>
                        </td>
                    </tr>
                    <tr class="row">
                        <td>FTP</td>
                        <td>
                            <label class="switch small">
                                <input type="checkbox" data-key="FTPD"/>
                                <span class="slider round"></span>
                                <span class="switch-text"></span>
                            </label>
                            <span class="switch-description">
                                Enable or disable the FTP server.
                            </span>
                        </td>
                    </tr>
                    <tr class="row">
                        <td>Legacy FTP</td>
                        <td>
                            <label class="switch small">
                                <input type="checkbox" data-key="BUSYBOX_FTPD"/>
                                <span class="slider round"></span>
                                <span class="switch-text"></span>
                            </label>
                            <span class="switch-description">
                                Switch to the legacy BusyBox FTP server.
                            </span>
                                <br/>
                            <span class="italic">
                                NOTE: If you are trying to disable Pure-FTPd as mentioned in <a target="_blank" href="https://github.com/shadow-1/yi-hack-v3/issues/129#issuecomment-361723075">this issue</a> you can enable this option instead of manually editing the system.sh file.
                            </span>
                        </td>
                    </tr>
                    <tr class="row">
                        <td>Telnet</td>
                        <td>
                            <label class="switch small">
                                <input type="checkbox" data-key="TELNETD"/>
                                <span class="slider round"></span>
                                <span class="switch-text"></span>
                            </label>
                            <span class="switch-description">
                                Enable or disable the Telnet server.
                                <br/>
                                <span class="strong">WARNING: Telnet is NOT a secure protocol and should be avoided. Enable only if it's really necessary.</span>
                            </span>
                        </td>
                    </tr>
                    <tr class="row">
                        <td>NTPD</td>
                        <td>
                            <label class="switch small">
                                <input type="checkbox" data-key="NTPD"/>
                                <span class="slider round"></span>
                                <span class="switch-text"></span>
                            </label>
                            <span class="switch-description">
                                Enable or disable the Network Time Protocol Daemon. This is required to sync the time on the camera if the cloud features are disabled.
                            </span>
                        </td>
                    </tr>
                    <tr class="row">
                        <td>NTP Server</td>
                        <td>
                            <input class="u-full-width" type="text" placeholder="" data-key="NTP_SERVER" id="NTP_SERVER"/>
                            <span class="switch-description">
                                NTP server name.
                            </span>
                        </td>
                    </tr>
                    <tr class="row">
                        <td>HTTPD</td>
                        <td>
                            <label class="switch small">
                                <input type="checkbox" data-key="HTTPD"/>
                                <span class="slider round"></span>
                                <span class="switch-text"></span>
                            </label>
                            <span class="switch-description">
                                Enable or disable the Web Server.
                                <br/>
                                <span class="strong">WARNING: If disabled, you won't have access to this page.</span>
                            </span>
                        </td>
                    </tr>
                    <tr class="row">
                        <td>MDNSD</td>
                        <td>
                            <label class="switch small">
                                <input type="checkbox" data-key="MDNSD"/>
                                <span class="slider round"></span>
                                <span class="switch-text"></span>
                            </label>
                            <span class="switch-description">
                                Enable or disable Multicast DNS Daemon.
                            </span>
                        </td>
                    </tr>
                    <tr class="row">
                        <td>Proxychains-ng</td>
                        <td>
                            <label class="switch small">
                                <input type="checkbox" data-key="PROXYCHAINSNG"/>
                                <span class="slider round"></span>
                                <span class="switch-text"></span>
                            </label>
                            <span class="switch-description">
                                Proxychains-ng is a way to bypass the region restrictions imposed by Yi when using a Chinese camera outside China. See the GitHub page for more info on how to configure it.
                            </span>
                            <br/>
                            <br/>
                            <input class="button-primary" type="button" id="button-proxy-edit" value="Edit" onclick="window.location.href='?page=proxy'"/>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <h4 class="no-margin">TCP ports</h4>
        <hr class="tiny-margin"/>
        <div class="row">
            <div class="twelve columns configs-switch">
                <table class="u-full-width padded-table config-table">
                    <tbody>
                    <tr class="row">
                        <td>RTSP Port</td>
                        <td>
                            <input class="u-full-width" type="text" placeholder="" data-key="RTSP_PORT" id="RTSP_PORT"/>
                            <span class="switch-description">
                                TCP port used by RTSP Server (default 554).
                            </span>
                        </td>
                    </tr>
<!--                    <tr class="row">
                        <td>ONVIF Port</td>
                        <td>
                            <input class="u-full-width" type="text" placeholder="" data-key="ONVIF_PORT" id="ONVIF_PORT"/>
                            <span class="switch-description">
                                TCP port used by ONVIF Server (default 80).
                            </span>
                        </td>
                    </tr> -->
                    <tr class="row">
                        <td>HTTPD Port</td>
                        <td>
                            <input class="u-full-width" type="text" placeholder="" data-key="HTTPD_PORT" id="HTTPD_PORT"/>
                            <span class="switch-description">
                                TCP port used by HTTPD Server (default 80).
                            </span>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <h4 class="no-margin">Authentication</h4>
        <hr class="tiny-margin"/>
        <div class="row">
            <div class="twelve columns configs-switch">
                <table class="u-full-width padded-table config-table">
                    <tbody>
                    <tr class="row">
                        <td>Username</td>
                        <td>
                            <input class="u-full-width" type="text" placeholder="" data-key="USERNAME" id="USERNAME"/>
                            <span class="switch-description">
                                Username to access RTSP, ONVIF and HTTP (default empty).
                            </span>
                        </td>
                    </tr>
                    <tr class="row">
                        <td>Password</td>
                        <td>
                            <input class="u-full-width" type="password" placeholder="" data-key="PASSWORD" id="PASSWORD"/>
                            <span class="switch-description">
                                Password to access RTSP, ONVIF and HTTP (default empty).
                                <br/>
                                Allowed special chars: \ | ! &quot; $ % &amp; / ( ) &apos; ? ^ [ ] @ &lt; &gt; , ; . : - _ *
                            </span>
                        </td>
                    </tr>
                    <tr class="row">
                        <td>Root Password</td>
                        <td>
                            <input class="u-full-width" type="password" placeholder="" data-key="SSH_PASSWORD" id="SSH_PASSWORD"/>
                            <span class="switch-description">
                                Password for SSH, Telnet and FTP root user (default empty).
                                <br/>
                                Allowed special chars: \ | ! &quot; $ % &amp; / ( ) &apos; ? ^ [ ] @ &lt; &gt; , ; . : - _ *
                            </span>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <h4 class="no-margin">Expert</h4>
        <hr class="tiny-margin"/>
        <div class="row">
            <div class="twelve columns configs-switch">
                <table class="u-full-width padded-table config-table">
                    <tbody>
                    <tr class="row">
                        <td>Crontab</td>
                        <td>
                            <span class="switch-description" style="font-family:'Lucida Console', Courier, monospace; font-size:12px;">
# +------------ Minute            (range: 0-59)<br/>
# | +---------- Hour              (range: 0-23)<br/>
# | | +-------- Day of the Month  (range: 1-31)<br/>
# | | | +------ Month of the Year (range: 1-12)<br/>
# | | | | +---- Day of the Week   (range: 0-6, sunday to saturday)<br/>
# | | | | |<br/>
# * * * * * &lt;command to execute&gt;<br/>
                            </span>
                            <textarea class="u-full-width" rows="4" cols="50" data-key="CRONTAB" id="CRONTAB"/>
                            <span class="switch-description">
                                Insert here your scheduled process using crontab syntax.
                                <br/>
                                Allowed special chars: \ | ! &quot; $ % &amp; / ( ) &apos; ? ^ [ ] @ &lt; &gt; , ; . : - _ *
                            </span>
                        </td>
                    </tr>
                    <tr class="row">
                        <td>Debug log</td>
                        <td>
                            <label class="switch small">
                                <input type="checkbox" data-key="DEBUG_LOG"/>
                                <span class="slider round"></span>
                                <span class="switch-text"></span>
                            </label>
                            <span class="switch-description">
                                Enable debug of the init script. This option will create the file /tmp/sd/hack_debug.log during the boot process.
                            </span>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="align-right">
            <span class="strong">Any change will take effect after the reboot of the camera.</span>
        </div>
        <br/>
        <div class="float-right">
            <div class="padded-right save-text" id="save-status"></div>
            <input class="button-primary" type="button" id="button-save" value="Save Configuration"/>
        </div>
    </div>
</div>
